<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
            <li>
                <input type="checkbox" checked="false" />
                <span>第一条信息</span>
                <a href="javascript:;" class="collect">收藏</a>
                <a href="javascript:;" class="cancelCollect">取消收藏</a>
                <a href="javascript:;" class="remove">删除</a>
            </li>
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        var data = [
            {
                id: 0,
                title: "残酷月光 - 费启鸣",
                checked: true,
                collect: true
            }, {
                id: 1,
                title: "兄弟 - 艾热",
                checked: false,
                collect: false
            }, {
                id: 2,
                title: "毕生 - 夏增祥",
                checked: false,
                collect: true
            }, {
                id: 3,
                title: "公子向北去 - 李春花",
                checked: false,
                collect: false
            }, {
                id: 4,
                title: "战场 - 沙漠五子",
                checked: true,
                collect: false //是否收藏 true 收藏 false 没有收藏
            }
        ];
        // 获取数据
        let ulEl = document.querySelector('#list');
        let checkAll = document.querySelector('#checkAll');
        // 数据渲染
        function dataRender() {
            ulEl.innerHTML = '';
            data.forEach((item, index) => {
                let lis = document.createElement('li');
                lis .innerHTML = `
                    <input type="checkbox" ${item.checked ?  'checked': ''}  index=${index} />
                    <span>${item.title}</span>
                    ${item.collect ? `<a href="javascript:;" class="cancelCollect" index=${index} >取消收藏</a>` : ` <a href="javascript:;" class="collect" index=${index}>收藏</a>`}
                    <a href="javascript:;" class="remove">删除</a>
                `;
                ulEl.appendChild(lis);                                        
            });
            // 伴随渲染全选和全不选
            // let checkAll = document.querySelector('#checkAll');
            let count = 0;
            data.forEach(item => {
                count += item.checked;
            })
            console.log(count ,'选中的');
            if (count === data.length && data.length > 0) {
                // checkAll.style.checked = true;
                // checkAll.setAttribute('checked','true');
                checkAll.checked = true;
            } else {
                // checkAll.style.checked = false;
                console.log('数量不一致');
                // checkAll.removeAttribute('checked');
                checkAll.checked = false;
            }
        }
        dataRender();

        // 单独勾选每一项，全不选
        ulEl.addEventListener('click',e => {
            // console.log('进入了',e.target.nodeName);
            if (e.target.nodeName === 'INPUT') {
                let idx = e.target.getAttribute('index');
                data[idx].checked = e.target.checked;
                dataRender();
            }
        })  

         // 取消收藏
         let liEL = document.querySelector('li');
        //  console.log(liEl, 'li标签');
         ulEl.addEventListener('click',e => {
            // console.log('进入了',e.target.nodeName);
            if (e.target.nodeName === 'A' && e.target.getAttribute('class') === 'cancelCollect') {
                let idx = e.target.getAttribute('index');
                data[idx].collect = false;
                // console.log(liEL,liEl.children(3));
                // liEL.removeChild(liEl.children(3));
                dataRender();
            }
            if (e.target.classList.contains('collect')) {
                let idx = e.target.getAttribute('index');
                data[idx].collect = true;
                dataRender();
            }
        })  

        // 删除每一项
        ulEl.onclick = e => {
            // console.log('进入了',e.target.nodeName);
            console.log(e);
            if (e.target.nodeName === 'A' && e.target.getAttribute('class') === 'remove') {
                console.log('点击了删除');
                let idx = e.target.getAttribute('index');
                data.splice(idx,1);
                dataRender();
            }
        }

        // 直接点击全选，全不选
        checkAll.onclick = () => {
            data.forEach(item => {
                // console.log(checkAll.checked,'全选状态');
                item.checked = checkAll.checked;
            })
            dataRender();
        }
        
        // 添加每一项
        let add = document.querySelector('#add');
        let newInfo = document.querySelector('#newInfo');
        add.onclick = () => {
            let val = newInfo.value;
            if (!val.trim()) {
                alert('输入内容不能不空');
                return;
            }
            data.push(
                {
                id: 0,
                title: val,
                checked: false,
                collect: true
                }
            )
            dataRender();
            newInfo.value ='';
        }

        // 删除所有的
        let removeAll = document.querySelector('#remove');
        removeAll.onclick = () => {
            console.log('进入全部删除');
            data = data.filter(item => {
                return !item.checked;
            })
            dataRender();
        }
    </script>
</body>

</html>